<template>
<div class="footer">
      <mt-tabbar v-model="active" :fixed = true>
  <mt-tab-item id="/DataBox">
    <img class="tabimg" slot="icon" src="../assets/logo.png">
    数据盒
  </mt-tab-item>
  <mt-tab-item id="/FindInfo">
    <img class="tabimg" slot="icon" src="../assets/logo.png">
    找资料
  </mt-tab-item>
  <mt-tab-item id="/WorkBench">
    <img class="tabimg" slot="icon" src="../assets/logo.png">
    工作台
  </mt-tab-item>
  <mt-tab-item id="/SubScribe">
    <img class="tabimg" slot="icon" src="../assets/logo.png">
    订阅
  </mt-tab-item>
  <mt-tab-item id="/Mine">
    <img class="tabimg" slot="icon" src="../assets/logo.png">
    我的
  </mt-tab-item>
</mt-tabbar>
</div>
</template>
<script>
export default {
  components: {},
  created() {
    this.active = this.$route.path;
  },
  watch: {
    $route: function() {
      //   console.log(this.$route.path);
      this.active = this.$route.path;
    },
    active: function() {
      //   console.log(this.active);
      this.$router.push(this.active);
    }
  },
  data() {
    return {
      name: "footer组件",
      active: "/DataBox"
    };
  },
  methods: {}
};
</script>
<style  scoped>
.footer >>> .mint-tabbar {
  background: #ccc;
}
</style>
